<template>
	<div class="app-content App_border-box">
		<block v-if="$util.shieldReview()">
			<div class="share_link_wrap" @click="toDetail">
				<div class="share_link">
					<div class="img_box">
						<img :src="option.imgUrl" />
					</div>
					<div class="text_box">
						<text :decode="true" class="main_title ellipsis_two_line_com">{{ option.title }}</text>
						<div class="info_box">
							<p>
								<span>{{ option.cat_name }}</span>
							</p>
							<p>{{ option.extension_num }}人已推广, 获客{{ option.huoke_num }}人</p>
						</div>
					</div>
				</div>
			</div>

			<p class="share_content">朋友圈推广</p>
			<div class="textarea_wrap">
				<textarea v-model="content" placeholder="分享你的心得......" placeholder-class="ph" :maxlength="200"></textarea>
				<div class="count">{{currentNum}}/200</div>
			</div>
			<div class="upload_wrap">
				<uploader :max-count="maxCount" :imgList.sync="imgList" :size="210" />
			</div>
			<div class="bottom_btn" @click="publish">保存</div>
		</block>
		<block v-else>
			<div>暂无内容</div>
		</block>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { postAddMaterial, getMaterialDetail, postEditMaterial } from '@/api/getGuest'
import uploader from '@/components/App_uploader'
import { upLoadImg } from '@/utils/common'
import qs from 'qs'

export default {
	name: 'PublishMaterial',
	components: {
		uploader
	},
	data() {
		return {
			imgList: [],
			maxCount: 8,
			content: '',
			option: {},
			title: '',
			imgUrl: ''
		}
	},
	onLoad(option) {
		this.option = option
		this.option.title = decodeURIComponent(option.title)
		this.option.imgUrl = decodeURIComponent(option.imgUrl)
		if (option.cat_name) {
			this.option.cat_name = decodeURIComponent(option.cat_name)
		}
		if (option.rm_id) {
			getMaterialDetail({ rm_id: option.rm_id }).then(res => {
				this.content = res.data.copywritting
				this.imgList = res.data.picture_list.image_url
			})
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' }),
		currentNum() {
			return this.content.length
		}
	},
	methods: {
		publish() {
			if (!this.content) {
				uni.showToast({
					title: '请输入文案',
					icon: 'none'
				})
				return
			}
			if (this.imgList.length === 0) {
				uni.showToast({
					title: '请上传图片',
					icon: 'none'
				})
				return
			}
			this.option.from = 'publish'
			if (this.option.rm_id) {
				const params = {
					rm_id: this.option.rm_id,
					copywritting: this.content,
					image_path: this.imgList.join(',')
				}

				postEditMaterial(params).then(() => {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/getGuest/shareList?${qs.stringify(this.option)}`
						})
					}, 500)
				})
			} else {
				const { resource_type, case_article_id } = this.option
				const params = {
					resource_type,
					copywritting: this.content,
					image_path: this.imgList.join(','),
					id: case_article_id
				}
				postAddMaterial(params).then(() => {
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/getGuest/shareList?${qs.stringify(this.option)}`
						})
					}, 500)
				})
			}
		},
		toDetail() {
			const type = this.option.resource_type
			const goBackTypeArticle = this.option.relevance_id ? '' : 'editstra'

			const goBackTypeCase = this.option.relevance_id ? '' : 'editadcase'
			if (type == 1) {
				//   TODO 跳转文章详情
				// this.$router.push({
				//   name: 'Articledetai',
				//   query: {
				//     owner_user_id: this.userInfo.user_id,
				//     articleid: 'null',
				//     gobackt: goBackTypeArticle,
				//     mainId: this.option.case_article_id,
				//   },
				// });
			} else {
				//   TODO 跳转案例详情
				// this.$router.push({
				//   name: 'Casedetail',
				//   query: {
				//     owner_user_id: this.userInfo.user_id,
				//     caseid: 'null',
				//     gobackt: goBackTypeCase,
				//     mainId: this.option.case_article_id,
				//   },
				// });
			}
		}
	}
}
</script>

<style scoped  lang="scss">
	.share_link_wrap {
		background-color: #fff;
		padding: 30px;
		.share_link {
			background-color: #f5f5f5;
			padding: 20px;
			display: flex;
			.img_box {
				width: 140px;
				height: 140px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text_box {
				flex: 1;
				padding-left: 20px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.main_title {
					font-size: 30px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					line-height: 36px;
				}
				.info_box {
					p {
						line-height: 1;
						font-size: 24px;
						color: rgba(153, 153, 153, 1);
						&:nth-child(2) {
							margin-top: 9px;
						}
						span {
							padding-right: 26px;
						}
					}
				}
			}
		}
	}
	.share_content {
		padding: 30px 30px 21px;
		font-size: 30px;
		color: rgba(102, 102, 102, 1);
	}

	.upload_wrap {
		padding: 37px 0;
		// .upload_box {
		//   width:210px;
		//   height:210px;
		//   border:2px dashed rgba(221,221,221,1);
		//   background-color: #fff;
		//   display: flex;
		//   justify-content: center;
		//   align-items: center;
		//   .icontianjia {
		//     font-size: 40px;
		//   }
		// }
	}
	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 90px;
		line-height: 90px;
		text-align: center;
		background: rgba(255, 209, 26, 1);
		box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
		z-index: 999;
		font-size: 32px;
		color: rgba(58, 27, 4, 1);
	}
</style>
